<%--
  Created by IntelliJ IDEA.
  User: Guitar
  Date: 2024/11/19
  Time: 20:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/nav.css" />
    <link rel="stylesheet" href="../css/content.css" />
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/shouye_fenlei.css">
</head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        // 页面加载后使用 AJAX 获取项目数据
        $(document).ready(function() {
            // 请求项目数据
            $.ajax({
                url: '../ServiceListServlet',  // 后端 Servlet 地址
                type: 'GET',
                dataType: 'json',  // 响应数据格式
                success: function(data) {
                    // 清空当前项目列表
                    var ul = $(".shouye ul");
                    ul.empty();

                    // 遍历获取的数据并动态生成列表项
                    data.forEach(function(service) {
                        var listItem = "<li data-id='" + service.id + "'>" +
                            "<a href='xiangmu.jsp?id=" + service.id + "'>" +  <!-- 这里加了 a 标签 -->
                            "<div class='project'>" +
                            "<img src='../" + service.image + "' alt='" + service.name + "' width='250' height='250'>" +
                            "<div class='project-info'>" +
                            "<p class='project-name'>" + service.name + "</p>" +
                            "<p class='project-price'>" + service.price + "元</p>" +
                            "</div>" +
                            "</div>" +
                            "</a>" +
                            "</li>";


                        ul.append(listItem);
                    });
                },
                error: function(xhr, status, error) {
                    console.log("请求失败: " + status + ", 错误信息: " + error);
                }
            });
        });
    </script>
    </head>
    <body>
    <jsp:include page="nav.jsp"/>
    
    <div class="shouye">
        <a href="#"><input class="btn" type="button" value="最新"/></a>
        <input class="btn" type="button" value="最热"/>
        <br />
        <ul>
            <!-- 这里的项目列表会通过 AJAX 动态加载 -->
        </ul>
    </div>
</body>
</html>
